import React, {Component} from 'react';
import TheTable from "../TheTable";
import ThePagination from "../ThePagination";
import PropTypes from "prop-types";

class TheServiceStationOrder extends Component {
    state = {
        tableColumns: [
            {
                title: '订单编号',
                dataIndex: "orderCode",
                key: "orderCode",
            },
            {
                title: '服务站名称',
                dataIndex: "orderTypeName",
                key: "orderTypeName",
                render: text => <div style={{
                    overflow: 'hidden',
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis',
                    width: 200
                }}>{text}</div>,
                width: 200
            },
            {
                title: '商品名称',
                dataIndex: "productName",
                key: "productName"
            },
            {
                title: '商品单价',
                dataIndex: "orderPrice",
                key: "orderPrice",
                render: text => text && <React.$price price={text}/>
            },
            {
                title: '购买数量',
                dataIndex: "orderProductCount",
                key: "orderProductCount"
            },
            {
                title: '买家昵称',
                dataIndex: "wxNickName",
                key: "wxNickName"
            },
            {
                title: '买家手机号',
                dataIndex: "memberMobile",
                key: "memberMobile"
            },
            {
                title: '订单金额',
                dataIndex: "orderTotalPrice",
                key: "orderTotalPrice",
                render: text => text && <React.$price price={text}/>
            },
            {
                title: '嗨豆抵扣',
                dataIndex: "orderTotalScore",
                key: "orderTotalScore",
                render: text => text && <React.$price price={text} symbol={''}/>
            },
            {
                title: '实付金额',
                dataIndex: "orderPayPrice",
                key: "orderPayPrice",
                render: text => text && <React.$price price={text}/>
            },
            {
                title: '订单时间',
                dataIndex: "createTime",
                key: "createTime"
            },
            {
                title: '状态',
                dataIndex: "volumCodeName",
                key: "volumCodeName",
                render: (text, record) => <span style={{
                    color: `${record.volumeCodeState === '1' ? '#fa5251' : '#05c160'}`
                }}>{text}</span>
            },
            {
                title: '使用时间',
                dataIndex: "verificationTime",
                key: "verificationTime"
            },
        ],
    }

    render() {
        const {tableColumns} = this.state
        const {loading, dataSource, pageNo, pageSize, total, pageChange} = this.props
        return <>
            <TheTable loading={loading} dataSource={dataSource} columns={tableColumns}/>
            <ThePagination pageChange={pageChange} pageNo={pageNo} pageSize={pageSize} total={total}/>
        </>
    }
}

TheServiceStationOrder.propTypes = {
    pageNo: PropTypes.number,
    pageSize: PropTypes.number,
    total: PropTypes.number || PropTypes.string,
    loading: PropTypes.bool,
    dataSource: PropTypes.array || PropTypes.object,
    pagination: PropTypes.bool
}
TheServiceStationOrder.defaultProps = {
    pageSize: 10,
    pageNo: 1,
    total: 1,
    loading: false,
    dataSource: [],
    pagination: true
}
export default TheServiceStationOrder;